/**
 * 功能描述: 基础复选按钮样式
 * @author 赵常畅
 * @date 2022/9/22 17:01
 * @version 1.0
 */

@import "../../style/index";
@import "./checkButtonConstant";

// 基础checkButton 最外层容器
@mixin check-button-wrapper--layout {
  // 布局
  position: relative;
  display: inline-block;
  height: $--check-button-wrapper-height;
  line-height: $--check-button-wrapper-line-height;
  margin: 0;
  padding: 0 15px;
  // 基础checkButton
  & > .#{$namespace}-check-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
}
@include b(check-button-wrapper) {
  // 样式
  color: $--check-button-wrapper-font-color;
  font-size: $--check-button-wrapper-font-size;
  background: $--check-button-wrapper-background-color;
  border: $--check-button-wrapper-border;
  border-radius: $--check-button-wrapper-border-radius;
  cursor: pointer;
  transition: $--check-button-wrapper-transition;
  // a标签
  a {
    color: $--check-button-wrapper-a-font-color;
  }
  // 伪类 内部前面
  &::before {
    background-color: $--check-button-wrapper-before-background-color;
    transition: $--check-button-wrapper-before-transition;
    content: '';
  }
  // 鼠标悬浮
  &:hover {
    color: $--check-button-wrapper-hover-font-color;
  }
  // 获得焦点
  &:focus-within {
    z-index: 10;
    box-shadow: $--check-button-wrapper-focus-within-box-shadow;
  }
  // 引入布局
  @include check-button-wrapper--layout;
}

// large checkButton最外层容器
@mixin check-button-wrapper-large--layout {
  // 布局
  height: $--check-button-wrapper-large-height;
  line-height: $--check-button-wrapper-large-line-height;
}
@include b(check-button-wrapper-large) {
  // 样式
  font-size: $--check-button-wrapper-large-font-size;
  // 引入布局
  @include check-button-wrapper-large--layout;
}

// small checkButton最外层容器 布局
@include b(check-button-wrapper-small) {
  height: $--check-button-wrapper-small-height;
  padding: 0 7px;
  line-height: $--check-button-wrapper-small-line-height;
}

// 基础checkbutton最外层容器的内部容器及原生input
@mixin check-button-wrapper-inner--layout {
  // 布局
  width: 0;
  height: 0;
}
.#{$namespace}-check-button-wrapper .#{$namespace}-check-inner,
.#{$namespace}-check-button-wrapper input[type='checkbox'],
.#{$namespace}-check-button-wrapper input[type='check'] {
  // 样式
  opacity: 0;
  pointer-events: none;
  // 引入布局
  @include check-button-wrapper-inner--layout;
}

// 基础checkButton 选中 最外层容器
@include b(check-button-wrapper-checked) {
  // 非禁用
  &:not(.#{$namespace}-check-button-wrapper-disabled) {
    z-index: 1;
    color: $--check-button-wrapper-checked-font-color;
    background: $--check-button-wrapper-checked-background-color;
    border-color: $--check-button-wrapper-checked-border-color;
  }
  // 非禁用 伪类 内部前面
  &:not(.#{$namespace}-check-button-wrapper-disabled)::before {
    background-color: $--check-button-wrapper-checked-before-background-color;
  }
  // 非禁用 鼠标悬浮
  &:not(.#{$namespace}-check-button-wrapper-disabled):hover {
    color: $--check-button-wrapper-checked-hover-font-color;
    border-color: $--check-button-wrapper-checked-hover-border-color;
    &::before {
      background-color: $--check-button-wrapper-checked-hover-background-color;
    }
  }
  // 非禁用 元素激活
  &:not(.#{$namespace}-check-button-wrapper-disabled):active {
    color: $--check-button-wrapper-checked-active-font-color;
    border-color: $--check-button-wrapper-checked-active-border-color;
    // 伪类 内部前面
    &::before {
      background-color: $--check-button-wrapper-checked-active-background-color;
    }
  }
  // 非禁用 获得焦点
  &:not(.#{$namespace}-check-button-wrapper-disabled):focus-within {
    box-shadow: $--check-button-wrapper-checked-focus-within-box-shadow;
  }
}

// 基础checkButton 禁用
@include b(check-button-wrapper-disabled) {
  color: $--check-button-wrapper-disabled-font-color;
  background-color: $--check-button-wrapper-disabled-background-color;
  border-color: $--check-button-wrapper-disabled-border-color;
  cursor: not-allowed;
  // 选中
  &.#{$namespace}-check-button-wrapper-checked {
    color: $--check-button-wrapper-disabled-checked-font-color;
    background-color: $--check-button-wrapper-disabled-checked-background-color;
    border-color: $--check-button-wrapper-disabled-checked-border-color;
    box-shadow: none;
  }
  // 鼠标悬浮
  &:hover {
    color: $--check-button-wrapper-disabled-hover-font-color;
  }
}
